<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Docker Registry Face">
    <meta name="author" content="XiaoBao">

    <title>Docker Registry Face</title>

    <!-- Bootstrap core CSS -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="static/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="static/css/theme.css" rel="stylesheet">
</head>

<body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Docker Registry Face</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">镜像列表</a></li>
                    <li><a href="/settings">系统配置</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container" role="main">
       <div class="row panel panel-default">
            <div class="panel-heading">镜像列表 <span id="image_title"></span></div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-9" style="margin-bottom: 13px">
                        <button type="button" class="btn btn-primary" id="btn_collapse_all" onclick="collapseAll()">折叠</button>
                    </div>

                    <div class="col-md-3" style="margin-bottom: 13px">
                        <div class="input-icon-group">
                            <div class="input-group">
                                <input type="text" class="form-control" id="ipt_search_images" placeholder="搜索镜像 ..." autofocus/>
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-search"> </i>
                                </span> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="image_list" class="col-md-12"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- /container -->
    <footer class="footer navbar-fixed-bottom navbar-inverse">
        <div class="container">
            <p class="navbar-text">XiaoBao @2017.3</p>
        </div>
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="static/js/jquery-3.2.0.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="static/js/jquery-3.2.0.min.js"><\/script>')
    </script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/bootstrap-treeview.min.js"></script>
    <script>
        fetch('/api/v1/image', {
            method: 'get',
            headers: {"Content-type": "application/json charset=UTF-8"}
        })
        .then(
            function(response) {
                response.json().then(function(data) {
                if (response.status == 200) {
                    console.log(data)
                    var tree_view = []
                    $.each(data, function(index, fvalue, array) {
                        var img = {}
                        if (fvalue['sub']) {
                            img['text'] = fvalue.name
                            img['tags'] = [fvalue.sub.length]
                            img['nodes'] = []

                            $.each(fvalue.sub, function(index, svalue, array) {
                                img['nodes'].push({
                                    "text":svalue.name,
                                    "href":"tags?image=" + fvalue.name + "/" + svalue.name,
                                    "selectable": false
                                })
                            })
                            img["selectable"] = false
                            tree_view.push(img)
                        }
                    })
                    $.each(data, function(index, fvalue, array) {
                        var img = {}
                        if (!fvalue['sub']) {
                            img['text'] = fvalue.name
                            img["href"] = "tags?image=" + fvalue.name
                            img["selectable"] = false
                            tree_view.push(img)
                        }
                    })
 
                    if (tree_view.length) {
                        $('#image_list').treeview({
                            data: tree_view,
                            levels: 1,
                            showTags: true,
                            enableLinks: true
                        });
                    } else {
                        $('#image_list').treeview({data: [{"text":"仓库是空的 ..."}]})
                        $('#image_list').treeview('disableAll', { silent: true });
                        $('#btn_collapse_all').attr('disabled',true)
                        $('#btn_delete_images').attr('disabled',true)
                        $('#ipt_search_images').attr('disabled',true)
                    }
                }
            });
        })
        .catch(function(err) {
            alert("标签列表获取异常！" + err);
        });

        function collapseAll() {
            $('#image_list').treeview('collapseAll', { silent: true });
        }

        var search = function(e) {
            var options = {
                ignorecase: true,
                exactmatch: false,
                revealresults: true
            }
            var pattern = $('#ipt_search_images').val();
            var results = $('#image_list').treeview('search', [ pattern, options ]);
            if (!$('#ipt_search_images').val()) {
                collapseAll()
            }
        }
        $('#ipt_search_images').on('keyup', search);
    </script>
</body>

</html>